<template>
  <div class="">
    <el-form ref="form" :model="boxData" labelWidth="80px">
      <el-form-item label="表单名称">
        <el-input v-model="boxData.name"></el-input>
      </el-form-item>
      <el-form-item label="选择器">
        <el-select v-model="boxData.selectStr">
          <el-option label="imoo" value="imoo"></el-option>
          <el-option label="步步高" value="步步高"></el-option>
          <el-option label="小天才" value="小天才"></el-option>

        </el-select>
      </el-form-item>
      <el-form-item label="日期时间">
        <el-col :span="11">
          <el-date-picker type="date" placeholder="选择日期" v-model="boxData.startDate"></el-date-picker>
        </el-col>
        <el-col class="line" :span="2">-</el-col>
        <el-col :span="11">
          <el-time-picker type="fixed-time" placeholder="选择时间" v-model="boxData.endDate"></el-time-picker>
        </el-col>
      </el-form-item>
      <el-form-item label="选择开关">
        <el-switch on-text="" off-text="" v-model="boxData.delivery"></el-switch>
      </el-form-item>
      <el-form-item label="多选框">
        <el-checkbox-group v-model="boxData.checkbox">
          <el-checkbox label="immo" name="checkbox"></el-checkbox>
          <el-checkbox label="步步高" name="checkbox"></el-checkbox>
          <el-checkbox label="小天才" name="checkbox"></el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="单选框">
        <el-radio-group v-model="boxData.radio">
          <el-radio label="immo"></el-radio>
          <el-radio label="步步高"></el-radio>
          <el-radio label="小天才"></el-radio>

        </el-radio-group>
      </el-form-item>
      <el-form-item label="文本框">
        <el-input type="textarea" v-model="boxData.desc"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submit">提交</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>

  export default {
    data: function () {
      return {
        boxData: {
          name: '',
          selectStr: '',
          startDate: '',
          endDate: '',
          delivery: '',
          checkbox: [],
          radio:'',
          desc: ''
        }
      }

    },
    methods:{
      submit(){
        console.log(this.boxData)
      }
    }
  }
</script>
<style>


</style>

